<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link  rel="stylesheet" type="text/css"  href="css/common.css">
    <link  rel="stylesheet" type="text/css"  href="css/custom.css">
    <link rel="icon" href="img/favicon.ico" type="image/x-icon">
    <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no, viewport-fit=cover" />
    <title>蛋糕店</title>

</head>
<body class="bg-F4F4F4" id="app">

<!--首页-->
<div class="index  fill-blank" id="index" >

    <!-- 轮播图 -->
    <div class="fullSlide">
        <div class="bd">
            <ul>
                <li>
                    <a  href="#">
                        <img src="img/baner3.jpg"/>
                        <div class="item-detail color-blue-1">
                          <p class="main-title">控卡解馋  「魔」力轻负担</p>
                          <p class="sub-title">新品限时立减30元</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a  href="#">
                        <img src="img/baner2.jpg"/>
                        <div class="item-detail color-blue">
                            <p class="main-title">「魔」力控卡  轻爽好「芒椰」</p>
                            <p class="sub-title">新品限时立减30元</p>
                        </div>
                    </a>
                </li>
                <li>
                <a  href="#">
                    <img src="img/baner4.jpg"/>
                    <div class="item-detail">
                        <p class="main-title">芒芒夏日 活力全开</p>
                        <p class="sub-title">多款芒果限定 至高立减35元</p>
                    </div>
                </a>
                </li>
                <li>
                    <a  href="#">
                        <img src="img/baner5.jpg"/>
                        <div class="item-detail color-red">
                            <p class="main-title">数字蛋糕第二件半价</p>
                            <p class="sub-title">盛夏7月 有你真甜</p>
                        </div>
                    </a>
                </li>
            </ul>
        </div>

        <div class="hd"><ul></ul></div>
    </div>
    <!-- 轮播图 -->


    <!--club-->
    <div class="club">
        <div class="l-text">
            <p>尊贵礼遇享不停，升级aha会员</p>
            <p>预计可省更多<a>了解更多</a></p>
            <a href="#" class="kt">立即开通 ￥99元/年</a>
        </div>
       <div class="r-img">
           <img src="img/ahaRights.png">
       </div>
    </div>

    <!--折合-->
    <div class="discount">
       <div class="item">
           <h1>
               <img src="img/title.png" class="title">
               <img src="img/btn_more.png" class="more">
           </h1>
           <div class="list-box">
               <a href="#" class="item">
                   <div class="img-box">
                       <img src="img/list_24689.jpg">
                   </div>
                   <div class="text">
                       <span>￥255</span>
                       <span>折合0元<i></i></span>
                   </div>
               </a>

               <a href="#" class="item">
                   <div class="img-box">
                       <img src="img/list_24273.jpg">
                   </div>
                   <div class="text">
                       <span>￥255</span>
                       <span>折合0元<i></i></span>
                   </div>
               </a>

               <a href="#" class="item">
                   <div class="img-box">
                       <img src="img/list_24261.jpg">
                   </div>
                   <div class="text">
                       <span>￥255</span>
                       <span>折合0元<i></i></span>
                   </div>
               </a>
           </div>

       </div>


    </div>

    <!--宣传图-->
    <a class="speed-banner"></a>

    <!--平铺宣传图片 蛋糕推荐-->
    <div class="theme-title">
        <span>蛋糕推荐</span>
    </div>

    <div class="theme-content" id="goodsList">
        <a class="item">
            <img src="img/home_1.jpg">
            <div class="item-detail">
                <p class="name">雪域牛乳芝士</p>
                <p class="con">经典之作 热销多年</p>
            </div>
        </a>

        <a class="item">
            <img src="img/home_2.jpg">
            <div class="item-detail color-white">
                <p class="name">王牌雪域套餐</p>
                <p class="con">流心诱惑！风靡Ins的芝士</p>
            </div>
        </a>

        <a class="item">
            <img src="img/home_5.jpg">
            <div class="item-detail">
                <p class="name">夏日芒芒套餐</p>
                <p class="con">五星好评 9种口味一次过瘾</p>
            </div>
        </a>
    </div>

    <!--底部一列标签-->
    <div class="section-others">
        <a href="#" class="one">
            企业兑换
        </a>

        <a href="#" class="two">
            卡券绑定
        </a>

        <a href="#" class="three">
          银行活动
        </a>

    </div>
    <!--侧栏小动图-->
    <div class="private-sphere"></div>

</div>


<!--蛋糕页面-->
<div class="cake fill-blank" id="cake"  style="display: none">
 <!--头部-->
    <header class="fixed-header">
        <a href="#" class="icon position" id="position"><span>上海</span></a>
        <h1 class="fix-title" id="classify">
            <a href="#" class="active">综合</a>
            <a href="#">销量</a>
        </h1>
        <a class="icon shift" id="shiftBtn"><span>筛选</span></a>
    </header>

    <!--位置 右侧弹框-->
    <div class="position-box" id="positionBox">
        <div class="cover"></div>
        <div class="position-content" id="positionContent">
            <h2 class="main-title">配送至</h2>
            <p class="sub-title">当前定位城市：<strong id="selectAddress">吉林市</strong></p>
            <div class="list-box">
                    <a class="active"><span>上海</span></a>
                    <a><span>北京</span></a>
                    <a><span>广州</span></a>
                    <a><span>南京</span></a>
                    <a><span>成都</span></a>
                    <a><span>深圳</span></a>
                    <a><span>杭州</span></a>
                    <a><span>苏州</span></a>
                    <a><span>天津</span></a>
                    <a><span>宁波</span></a>
                    <a><span>无锡</span></a>
                    <a><span>全国</span></a>
            </div>
            <div class="search-box">
                <a class="icon serach">查询收获地址是否可配送</a>
            </div>
        </div>
    </div>

    <!--筛选 左侧弹框-->
    <div class="shift-box" id="shiftBox">
        <div class="cover"></div>
        <div class="shift-content" id="shiftContent">
            <h1 class="title">筛选</h1>
            <div class="list-item">
                <dl>
                    <dt>口味</dt>
                    <dd>全部</dd>
                    <dd class="active">雪域燕麦</dd>
                    <dd>雪域口味</dd>
                    <dd>巧克力味</dd>
                    <dd>芝士口味</dd>
                    <dd>慕斯口味</dd>
                    <dd>鲜果口味</dd>
                    <dd>奶油口味</dd>
                    <dd class="placeholder"></dd>
                </dl>

                <dl>
                    <dt>系列</dt>
                    <dd>乳酪</dd>
                    <dd class="active">奶油水果</dd>
                    <dd>雪域口味</dd>
                    <dd>经典蛋糕</dd>
                    <dd>婚礼蛋糕</dd>
                    <dd>艺术蛋糕</dd>
                </dl>
            </div>
            <div class="opera-btn" id="operaBtn">
                <a class="active" id="shiftReset">重置</a>
                <a id="sureBtn">确定</a>
            </div>
        </div>
    </div>

    <!--主要内容-->
    <div class="main">
        <!--宣传图-->
        <a class="preach-box">
            <div class="preach"></div>
        </a>

        <!--商品列表-->
        <div class="goods-list">
            <div class="item">
                <!--图片-->
                <a>
                    <div class="img-box">
                        <img src="img/iceCream.png">
                    </div>
                    <!--<div class="tips">
                        <span class="tips-text"></span>
                    </div>-->
                </a>
                <!--描述-->
                <div  class="detail">
                    <h4 class="title">须尽欢联名软心冰淇淋·尝鲜礼盒</h4>
                    <p><span class="tag"></span></p>
                    <p class="reason">低卡高饱腹 解馋不怕胖</p>
                    <p class="price">
                        <span class="new-price">￥69</span>
                        <span class="markup-price">￥6.9</span>
                    </p>
                </div>
            </div>

            <div class="item">
                <!--图片-->
                <a>
                    <div class="img-box">
                        <img src="img/list_23969.jpg">
                    </div>
                    <div class="tips">
                        <span class="tips-text">人气新品</span>
                    </div>
                </a>
                <!--描述-->
                <div  class="detail">
                    <h4 class="title">诺心×须尽欢联名软心冰淇淋礼盒</h4>
                    <p><span class="tag">轻盈上新 1件29.9 </span></p>
                    <p class="reason">低卡高饱腹 解馋不怕胖</p>
                    <p class="price">
                        <span class="new-price">￥100</span>
                        <span class="markup-price">￥50</span>
                    </p>
                </div>
            </div>

            <div class="item">
                <!--图片-->
                <a>
                    <div class="img-box">
                        <img src="img/list_23973.jpg">
                    </div>
                    <div class="tips">
                        <span class="tips-text">玻尿酸</span>
                    </div>
                </a>
                <!--描述-->
                <div  class="detail">
                    <h4 class="title">黑森林</h4>
                    <p><span class="tag">限时立减50元起</span></p>
                    <p class="reason">甜蜜与香浓交错</p>
                    <p class="price">
                        <span class="new-price">￥166</span>
                      <!--  <span class="markup-price">￥6.9</span>-->
                    </p>
                </div>
            </div>

            <div class="item">
                <!--图片-->
                <a>
                    <div class="img-box">
                        <img src="img/list_24207.jpg">
                    </div>
                </a>
                <!--描述-->
                <div  class="detail">
                    <h4 class="title">空气舒芙蕾</h4>
                    <p><span class="tag"></span></p>
                    <p class="reason">轻盈蓬松，一口柔化你的心</p>
                    <p class="price">
                        <span class="new-price">￥69</span>
                        <span class="markup-price">￥6.9</span>
                    </p>
                </div>
            </div>

            <div class="item">
                <!--图片-->
                <a>
                    <div class="img-box">
                        <img src="img/list_24847.jpg">
                    </div>
                   <!-- <div class="tips">
                        <span class="tips-text">人气新品</span>
                    </div>-->
                </a>
                <!--描述-->
                <div  class="detail">
                    <h4 class="title">冰淇淋礼盒</h4>
                    <p><span class="tag">轻盈上新2件49.9</span></p>
                    <p class="reason">低卡高饱腹 解馋不怕胖</p>
                    <p class="price">
                        <span class="new-price">￥888</span>
                        <span class="markup-price">￥88</span>
                    </p>
                </div>
            </div>

            <div class="item">
                <!--图片-->
                <a>
                    <div class="img-box">
                        <img src="img/list_12287.jpg">
                    </div>
                   <!-- <div class="tips">
                        <span class="tips-text">人气新品</span>
                    </div>-->
                </a>
                <!--描述-->
                <div  class="detail">
                    <h4 class="title">原味巴斯克</h4>
                    <p><span class="tag">限时立减50元起</span></p>
                    <p class="reason">轻盈蓬松，一口柔化你的心</p>
                    <p class="price">
                        <span class="new-price">￥9999</span>
                        <span class="markup-price">￥150</span>
                    </p>
                </div>
            </div>

        </div>
    </div>

</div>


<!--购物袋-->
<div class="shopbag bg" id="shopbag" style="display: none">
   <div id="shopBagList">
       <div class="shopbag-box">
           <a class="radio"></a>
           <div class="detail-box">
               <a class="imgwrap">
                   <img src="img/list_23951.jpg">
               </a>
               <div class="details">
                   <p class="title">须尽欢联名软心冰淇淋·雪域杨枝甘露cp礼盒</p>
                   <p class="prize"><span>￥106</span></p>
                   <div class="addition">
                       <span>￥168</span>
                       <div>
                           <a class="sub"></a>
                           <input type="number" readonly value="2"/>
                           <a class="add"></a>
                       </div>
                   </div>
               </div>
           </div>
       </div>

       <div class="shopbag-box">
           <a class="radio active"></a>
           <div class="detail-box">
               <a class="imgwrap">
                   <img src="img/list_23904.jpg">
               </a>
               <div class="details">
                   <p class="title">「空气」魔芋蛋糕</p>
                   <p class="prize"><span>￥88</span></p>
                   <div class="addition">
                       <span>￥88</span>
                       <div id="addSubDelOpera">
                           <a class="sub"></a>
                           <input type="number" readonly value="2"/>
                           <a class="add"></a>
                       </div>
                   </div>
               </div>
           </div>
       </div>
   </div>


    <!--底部结算-->
    <div class="footer"ssf>
        <a class="radio" id="allSelect"></a>
        <div class="contain">
            <div class="box">
                <span>全选</span>
                <div class="price">
                    <span>应付：￥<i>1888</i></span>
                    <span>已省：-￥565</span>
                </div>
            </div>
            <a class="btn">结算</a>
        </div>
    </div>
</div>

<!--我的-->
<div class="my" id="my" style="display: none">
    <!--用户信息-->
    <div class="user-box">
        <img src="img/user-img.png">
        <a href="login.html">登录</a>
    </div>

   <div class="contain">
       <!--订单状态-->
       <div class="order-status">
           <div class="title">我的订单</div>
           <div class="list">
               <a >待付款</a>
               <a>待发货</a>
               <a>待收获</a>
               <a>我的订单</a>
           </div>
       </div>

       <!--开通会员-->
       <a class="membership">
          <div class="box">
              <div class="detail">
                  <p>aha会员</p>
                  <p>尊享更多惊喜礼遇</p>
              </div>
              <div class="open">
                  立即开通
              </div>
          </div>
       </a>
       <!--我的服务-->
       <div class="order-status">
           <div class="title">我的服务</div>
           <div class="list second">
               <a>生日助手</a>
               <a>个人资料</a>
               <a>储值卡<br/>专享兑换券</a>
               <a>在线客服</a>
               <a>我的发票</a>
               <a>关于我们</a>
           </div>
       </div>


   </div>
</div>

<!--底部导航栏-->
 <div class="tab-bar bg-FFFFFF">
    <a  href="#"   class="active">
        <span class="index"></span>
        <span>首页</span>
    </a>
    <a href="#" >
        <span class="cake"></span>
        <span>蛋糕</span>
    </a>
  <!--  <a href="#">
        <span class="distribution"></span>
        <span>全国配</span>
    </a>-->
    <a href="#">
        <span class="bag"></span>
        <span>购物袋</span>
    </a>
    <a href="#" >
        <span class="my"></span>
        <span>我的</span>
    </a>
 </div>




<script src="js/jquery1.42.min.js"></script>
<script src="js/jquery.SuperSlide.2.1.3.source.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="js/vue.js"> </script>


<script type="text/javascript">
    jQuery(".fullSlide").slide({ titCell:".hd ul", mainCell:".bd ul", effect:"leftLoop", vis:"auto", autoPlay:true, autoPage:true, trigger:"click" });
</script>




    <script>
    /**
     * ================================================
     * 适配 设置根元素font-size
     * 当设备宽度为375(iPhone6)时，根元素font-size=16px;
     × ================================================
     */
    (function (doc, win) {
        var docEl = win.document.documentElement;
        var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';

        var refreshRem = function () {
            var clientWidth = win.innerWidth
                || doc.documentElement.clientWidth
                || doc.body.clientWidth;

            console.log(clientWidth)
            if (!clientWidth) return;
            var fz;
            var width = clientWidth;
            fz = 16 * width / 375;
            docEl.style.fontSize = fz + 'px';//这样每一份也是16px,即1rem=16px
        };

        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, refreshRem, false);
        doc.addEventListener('DOMContentLoaded', refreshRem, false);
        refreshRem();

    })(document, window);

</script>

<script>
    $(function(){

        var pageArr = ['index','cake','shopbag','my'] ;
        /*导航栏切换*/
        $(".tab-bar a").click(function(){
            $('.tab-bar a').removeClass('active') ;
            $(this).addClass('active') ;
            var index = $(this).index() ;

            console.log('index:'+index) ;

            /*如果有显示的页面 则隐藏 跳出循环*/
            for (let i = 0 ; i < pageArr.length ; i++){
                var attrDisPlay = $('#'+pageArr[i]+'').css("display") ;
                if ( attrDisPlay== 'block'){
                    $('#'+pageArr[i]+'').css({display:'none'}) ;
                    break ;
                }
            }

            /*点击tab对应的页面显示*/
            $('#'+pageArr[index]+'').css({'display':'block'}) ;
        })

        /*右侧小人 向左向右移动*/
        $(".private-sphere").toggle(function(){
            $(this).removeClass('toRight').addClass('toLeft') ;
        },function(){
            $(this).removeClass('toLeft').addClass('toRight') ;
        })

        /*分类*/
        $("#classify a").click(function () {
            $(this).siblings().removeClass('active');
            $(this).addClass('active') ;
        })

        /*筛选 点击按钮*/
        $('#shiftBtn').click(function(){
            $("#shiftBox").addClass('animation');
        }) ;


        /*筛选-类别按钮*/
        $('#shiftContent dd').toggle(function(){
            $(this).addClass('active') ;
        },function () {
            $(this).removeClass('active') ;
        });

        /*筛选 遮罩层 隐藏筛选界面*/
        $("#shiftBox .cover").click(function(){
            $(this).parent().removeClass('animation') ;
        });

        //筛选部分 重置 确定
        $("#shiftReset").click(function(){
           $("#shiftContent").find('dd').removeClass('active')  ;
           $('#operaBtn').find('a').removeClass('active') ;
           $(this).addClass('active') ;
        });

        /*筛选-确定按钮*/
        $('#sureBtn').click(function(){
            $('#operaBtn').find('a').removeClass('active') ;
            $(this).addClass('active') ;
        });

        /*地址 弹出详细地址界面*/
        $("#position").click(function () {
            $("#positionBox").addClass('animation') ;
        })

        /*地址的遮罩层 隐藏*/
        $("#positionBox .cover").click(function () {
            $('#positionBox').removeClass('animation') ;
        })

        /*地址 界面的每个市*/
        $("#positionBox .list-box a").click(function(){
            $(this).siblings().removeClass('active') ;
            $(this).addClass('active') ;
            $('#selectAddress').text($(this).find('span').text() ) ;
        })


        /*首页-蛋糕列表*/
        $(".item").click(function(){
            window.location.href = "goodsdetail.html"
        });


        /*购物袋 全选*/
        $("#allSelect").toggle(function () {
            $('.radio').addClass('active') ;
        },function () {
            $('.radio').removeClass('active') ;
        })

        /*购物袋 列表*/
        $('#shopBagList .radio').toggle(function(){
            $(this).addClass('active') ;
        },function () {
            $(this).removeClass('active') ;
        });

        /*购物袋 加购+*/
        $(".add").click(function () {
            var val = parseInt($(this).siblings('input').val()) ;
            if (val == 1){
                $(this).siblings('.del').removeClass('del').addClass('sub') ;
            }
            $(this).siblings('input').val(val+1) ;

        });

        $(".sub").click(function () {
            var val =parseInt($(this).siblings('input').val()) - 1 ;
            if (val >= 1){
                 $(this).siblings('input').val(val) ;
              if (val == 1){
                  $(this).removeClass('sub').addClass('del');
              }
            }
        });

        $(".del").click(function () {
            var classname =  $(this).attr('class') ;
            console.log(classname) ;
        });

    })




</script>
</body>
</html>